<template>
  <div class="pdf" v-show="showPdf">
    <vue-pdf-embed ref="pdfRef" :source="source" :page="page" :width="500" @loaded="handlePdfLoaded"></vue-pdf-embed>
    <el-pagination layout="prev, pager, next" :total="totalPages * 10" v-model:current-page="page" />
  </div>
</template>

<script setup>
import { ref } from "vue";
import VuePdfEmbed from "vue-pdf-embed";
const source = ref('')
const page = ref(1)
const totalPages = ref(0)
const showPdf = ref(false)

const open = (url) => {
  source.value = url
}
const close = () => {
  if (source.value) {
    source.value = ''
  }
  showPdf.value = false

}

const handlePdfLoaded = (e) => {
  console.log("PDF加载完成，总页数:", e._pdfInfo.numPages);
  totalPages.value = e._pdfInfo.numPages;
  showPdf.value = true
};


defineExpose({
  open,
  close
})
</script>

<style scoped>
.pdf {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
</style>